<form id="image-upload-form">
  <input type="file" id="image-input" name="image" accept="image/*" required /><br /><br />
  <button type="submit">Upload Image</button>
</form>

<script>
  document.getElementById('image-upload-form').addEventListener('submit', function (event) {
    event.preventDefault() // 阻止表单默认提交行为

    const formData = new FormData()
    const fileInput = document.getElementById('image-input')
    const file = fileInput.files[0] // 获取选择的文件

    formData.append('image', file)
    // 在使用 FormData 对象发送请求时，通常不需要显式指定 Content-Type 头。
    // 这是因为浏览器会自动识别 FormData 对象，并设置适当的 Content-Type 头为 multipart/form-data。
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
      .then((response) => {
        if (response.ok) {
          // 图片上传成功处理
          console.log('Image uploaded successfully!')
        } else {
          // 图片上传失败处理
          console.error('Image upload failed')
        }
      })
      .catch((error) => {
        console.error('Error:', error)
      })
  })
</script>
